<!DOCTYPE html>
<html>
<head>
<div th:include="base-libs-easyui :: base-libs-easyui" />
<title>菜单列表</title>

<style>
body {
	padding: 0px 10px;
}

.datagrid-header-row {
	height: 43px;
}

.datagrid-row {
	height: 38px;
}

.selected{
	color: #FFFFFF;
}
</style>
<script>
	$(function() {
		initView();
//		$("#btnQuery").trigger("click");
        queryMenu()
	})

	function initView() {

		/* easyui树  */
		$('#treeMenu').treegrid({
			idField : 'MENUID',
			treeField : 'MENUNAME',
			animate : true,
			fitColumns : true,
			fit : true,
			border : false,
			scrollbarSize : 0,
			toolbar: "#tb",
			columns : [[
				{
					title : '菜单编码',
					field : 'MENUID',
					width : '120'
				}
				,{
					title : '菜单名称',
					field : 'MENUNAME',
					width : '220'
				}
				,{
					title : '菜单功能',
					field : 'ACTIONS',
					width : '300',
					formatter: function(value,row,index){
						var actionNames = [];
						$.each(value, function(){
							actionNames.push(this["ACTION_NAME"])
						})
						return actionNames.join(",");
					}
				}
				,{
					title : '视图路径',
					field : 'VIEWURL',
					width : '300'
				}
				,{
					title : '操作',
					field : 'cz',
					width : '50',
					formatter : function(value, row, index) {
						if (row.children) {
							var updateBtn = $(
									$("#treeToolBar")
											.html()).find(
									"a").eq(0);
							return updateBtn.prop(
									"outerHTML").replace(
									"MENUID", row.MENUID);
						} else {
							return $("#treeToolBar").html()
									.replace(/MENUID/g,
											row.MENUID);
						}
					}
				}
			]]
			,onDblClickRow: function(row){
                $('#treeMenu').treegrid("collapse", row["MENUID"]);
			}
		});

		$("body").on("click", ".tableToolBarBtn", function(){
		    var action = $(this).attr("action");
		    var MENUID = $(this).attr("id");
		    if("update" == action){
                updateMenu(MENUID);
			}else if("delete" == action){
				deleteMenu(MENUID);
			}
		})
	}

	/** 删除菜单 */
	function deleteMenu(MENUID) {
		$.QuickAlert.alertConfirm({
			content : "是否删除菜单",
			callback : function() {
				var item = $('#treeMenu').treegrid('find', MENUID);
				$.QuickRemote.AjaxJson("delete", removeMenuBack, {
					MENUID : item.MENUID
				}, item);
			}
		})
	}
	function removeMenuBack(result, item) {
		if (result.state) {
			$.QuickAlert.alertNormal("菜单删除成功！", {
				callback : function() {
					queryMenu();
				}
			});
		} else {
			$.QuickAlert.alertFail({
				content : "菜单删除失败，请稍后再试..."
			});
		}
	}

	/***   树形展示   */

	/** 查询所有菜单-以树形式展示  */
	function queryMenu() {
		$.QuickRemote.AjaxJson(contextRoot + "/menu/queryMenu", queryMenuBack, null);
	}

	function queryMenuBack(result) {
		if (!$.isEmptyObject(result) && $.isArray(result)) {
		    /*格式化菜单功能*/
		    result = formatMenuAction(result);
			var treeData = createTreeList(result, result[0]["PRE_MENUID"]);
			$('#treeMenu').treegrid('loadData', treeData).treegrid('expandAll');
		}
	}

	/**将功能的json字符串转成数组*/
	function formatMenuAction(ary)
	{
	   $.each(ary, function(index, item){
	       var actions = item["ACTIONS"];
           if(!StringUtils.isEmpty(actions)) {
               var ary = JSON.parse(actions);
				item["ACTIONS"] = ary;
           }
	   })
		return ary;
	}

	/**封装树形结构*/
	function createTreeList(list, SJCDID) {
		var childList = [];
		for (var i = 0; i < list.length; i++) {
			var item = list[i];
			if (item == null) {
				continue;
			}
			var SJCDID1 = item["PRE_MENUID"];
			if (SJCDID1 != SJCDID) {
				continue;
			} else {
				var resid = item["MENUID"];
				var lt = createTreeList(list, resid);
				if (lt != null && lt.length != 0) {
					item["children"] = lt;
				}
				childList.push(item);
				list[i] = null;
			}
		}
		if (childList.length == 0) {
			childList = null;
		}
		return childList;
	}
	
	function btnQueryHandler()
	{
		queryMenu();
	}
	
	function btnAddHandler()
	{
		var item = $('#treeMenu').treegrid("getSelected");
		if(item)
		{
			var item = {"PRE_MENUID": item["MENUID"], "PRE_MENUNAME": item["MENUNAME"], "PRE_LEVEL": item["MENU_LEVEL"]};
			toManager(item);
		}
		else
		{
			$.QuickAlert.alertFail({
				content : "请选择上级菜单"
			});
		}
	}
	
	function updateMenu(MENUID)
	{
		var item = $('#treeMenu').treegrid('find', MENUID);
		toManager(item);
	}
	
	function toManager(item)
	{
		StoreCache.setCache("cache_menu", item);
		location = "manager.html";
	}
</script>
</head>

<body class="easyui-layout">
	<div region="north" style="height: 41px; border: none; overflow: hidden; background-color: #f9f9f9;">
		<div style="width: 100%; height: 100%; margin-left: 30px">
			<h3 style="line-height: 41px; margin: 0px; font-size: 18px;font-weight: bold;">菜单列表</h3>
		</div>
	</div>
	<div region="center">
		<div id="tb" style="padding:8px 20px;">
			<!--<button id="btnQuery" class="btn btn-default" type="button" onclick="btnQueryHandler()">查询</button>-->
			<button id="btnAdd" class="btn btn-default" type="button" onclick="btnAddHandler()">新增</button>
		</div>
		<table id="treeMenu"></table>
	</div>
</body>
<script type="text/html" id="treeToolBar">
 <div>
	<a class="tableToolBarBtn" action="update" id=MENUID href="javascript:void(0)" title="修改" style="color: #00c297;">修改</a>
	<a class="tableToolBarBtn" action="delete" id=MENUID href="javascript:void(0)" title="删除" style="color: #00c297;">删除</a>
 </div>
</script>
</html>
